<template>
	<div class="share-page">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/sale' }">在售商品</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/for_sale' }">在售详情</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="for-content">
			<div class="choice-list">
				<div class="choice-item" v-for="item in searchList" :key="item.index">
					<div class="choice-title">{{item.name}}</div>
					<el-select v-if="item.index!='1' && item.type == '1'" v-model="item.ivalue"
						:placeholder="item.placeholder">
						<el-option v-for="i in options" :key="i.value" :label="i.label" :value="i.value" />
					</el-select>
					<el-input v-model="item.ivalue" v-if="item.type=='2'" class="rounded-input" @blur="blurClick()"
						@focus="focusClick(item)" :placeholder="item.placeholder" />
					<el-date-picker v-if="item.type=='3'" v-model="item.ivalue" type="date"
						:placeholder="item.placeholder" style="width: 160px;" :suffix-icon="CaretBottom" />
				</div>
				<view class="choice-box">
					<div class="choice-btn">
						<el-button round :icon="Search" color="#0071bb">查询</el-button>
						<el-button round :icon="RefreshLeft">重置</el-button>
					</div>
				</view>
			</div>
			<div class="use">
				<el-button round>导出商品清单</el-button>
				<el-button round :icon="Refresh">刷新</el-button>
				<el-button round color="#0071bb" :icon="HelpFilled">筛选</el-button>
			</div>
			<div class="head-info">
				<div class="info-item">
					设备名称:伯克材料678652789
				</div>
				<div class="info-item">
					设备IMEI号:456789456
				</div>
				<div class="info-item">
					业务类型:零柜售
				</div>
			</div>
			<div class="tables">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column type="selection" v-model="whole" />
					<el-table-column prop="id" label="序号" width="50px" />
					<el-table-column prop="date" label="上架日期" />
					<el-table-column prop="img" label="商品图片">
						<template #default="scope">
							<img class="goods_img" :src="scope.row.img" alt="" />
						</template>
					</el-table-column>
					<el-table-column prop="name" label="商品名称" />
					<el-table-column prop="code" label="商品编码" />
					<el-table-column prop="price" label="售价" />
					<el-table-column prop="num" label="在售数量" />
					<el-table-column prop="give" label="惠家红包赠送" width="200px">
						<template #header>
							<div class="th_title">
								<div>
									惠家红包赠送
								</div>
								<el-icon color="#0071bb" style="margin-left: 3px;">
									<QuestionFilled />
								</el-icon>
							</div>
						</template>
						<template #default="scope">
							<div class="container">
								<el-button size="small" @click="clickshow(scope.row,'give')" type="primary" round
									color="#0071bb">
									{{scope.row.give}}
									<el-icon class="el-icon--right">
										<CaretBottom />
									</el-icon>
								</el-button>
								<div v-if="scope.row.giveshowSelect" class="select-box">
									<div :class="scope.row.givetype =='1'?'textbg':'text'"
										@click="clickchange(scope.row,'1','give','参加')">参加</div>
									<div :class="scope.row.givetype =='2'?'textbg':'text'"
										@click="clickchange(scope.row,'2','give','不参加')">不参加</div>
									<div class="text"> <el-checkbox v-model="scope.row.giveoverall" label="全局设置"
											size="small" /></div>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="discount" label="乐汇/惠家红包折扣" width="200px">
						<template #header>
							<div class="th_title">
								<div>
									乐汇/惠家红包折扣
								</div>
								<el-icon color="#0071bb" style="margin-left: 3px;">
									<QuestionFilled />
								</el-icon>
							</div>
						</template>
						<template #default="scope">
							<div class="container">
								<el-button size="small" @click="clickshow(scope.row,'discount')" type="primary" round
									color="#0071bb">
									{{scope.row.discount}}
									<el-icon class="el-icon--right">
										<CaretBottom />
									</el-icon>
								</el-button>
								<div v-if="scope.row.discountshowSelect" class="select-box">
									<div :class="scope.row.discounttype =='1'?'textbg':'text'"
										@click="clickchange(scope.row,'1','discount','参加')">参加</div>
									<div :class="scope.row.discounttype =='2'?'textbg':'text'"
										@click="clickchange(scope.row,'2','discount','不参加')">不参加</div>
									<div class="text"> <el-checkbox v-model="scope.row.discountoverall" label="全局设置"
											size="small" /></div>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="exchange" label="惠家红包兑换" width="200px">
						<template #header>
							<div class="th_title">
								<div>
									惠家红包兑换
								</div>
								<el-icon color="#0071bb" style="margin-left: 3px;">
									<QuestionFilled />
								</el-icon>
							</div>
						</template>
						<template #default="scope">
							<div class="container">
								<el-button size="small" @click="clickshow(scope.row,'exchange')" type="primary" round
									color="#0071bb">
									{{scope.row.exchange}}
									<el-icon class="el-icon--right">
										<CaretBottom />
									</el-icon>
								</el-button>
								<div v-if="scope.row.exchangeshowSelect" class="select-box">
									<div :class="scope.row.exchangetype =='1'?'textbg':'text'"
										@click="clickchange(scope.row,'1','exchange','参加')">参加</div>
									<div :class="scope.row.exchangetype =='2'?'textbg':'text'"
										@click="clickchange(scope.row,'2','exchange','不参加')">不参加</div>
									<div class="text"> <el-checkbox v-model="scope.row.exchangeoverall" label="全局设置"
											size="small" /></div>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="operate" label="操作">
						<template #default="scope">
							<div class="del">
								{{scope.row.operate}}
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>

	</div>
</template>
<style>
	.for-content .cell {
		overflow: inherit;
	}
</style>
<script lang="ts" setup>
	import { ref } from "vue";
	import { CaretBottom, Search, RefreshLeft, Refresh, HelpFilled, QuestionFilled } from '@element-plus/icons-vue'
	interface searchList {
		name : string;
		index : string;
		placeholder : string;
		type : string;
		ivalue : string;
	}
	const choiceIndex = ref("");
	const whole = ref(false)
	const tableData = [
		{
			id: '1',
			date: '2016-05-03',
			img: 'https://imgservice.suning.cn/uimg1/b2c/image/r3wTEuqkZr75_4IOn6ExbQ.jpg_800w_800h_4e',
			name: '康师傅茉莉蜜茶450ml',
			code: '8378437895784',
			price: '4.00',
			num: '6',
			give: '参加',
			discount: '不参加',
			exchange: '不参加',
			operate: '删除',
			exchangeshowSelect: false,
			exchangetype: '2',
			exchangeoverall: false,
			discountshowSelect: false,
			discounttype: '2',
			discountoverall: false,
			giveshowSelect: false,
			givetype: '1',
			giveoverall: false
		},
		{
			id: '1',
			date: '2016-05-03',
			img: 'https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
			name: '康师傅茉莉蜜茶450ml',
			code: '8378437895784',
			price: '4.00',
			num: '6',
			give: '参加',
			discount: '不参加',
			exchange: '不参加',
			operate: '删除',
			exchangeshowSelect: false,
			exchangetype: '2',
			exchangeoverall: false,
			discountshowSelect: false,
			discounttype: '2',
			discountoverall: false,
			giveshowSelect: false,
			givetype: '1',
			giveoverall: false
		},
	]
	const options = [
		{
			value: 'Option1',
			label: 'Option1',
		},
		{
			value: 'Option2',
			label: 'Option2',
		},
		{
			value: 'Option3',
			label: 'Option3',
		},
		{
			value: 'Option4',
			label: 'Option4',
		},
		{
			value: 'Option5',
			label: 'Option5',
		},
	]
	const searchList = ref<searchList[]>([
		{
			name: '设备名称',
			index: '1',
			placeholder: '请输入',
			type: '2',
			ivalue: ''
		},
		{
			name: '设备IMEI',
			index: '2',
			placeholder: '请输入关键词搜索',
			type: '2',
			ivalue: ''
		},
		{
			name: '业务类型',
			index: '3',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		},
		{
			name: '商品名称',
			index: '4',
			placeholder: '请输入关键词搜索',
			type: '2',
			ivalue: ''
		},
		{
			name: '商品编码',
			index: '5',
			placeholder: '请输入商品编码',
			type: '1',
			ivalue: ''
		},
		{
			name: '上架日期',
			index: '6',
			placeholder: '请选择补货日期',
			type: '3',
			ivalue: ''
		},
		{
			name: '惠家红包赠送',
			index: '7',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		},
		{
			name: '乐汇/惠家红包抵扣',
			index: '8',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		},
		{
			name: '惠家红包兑换',
			index: '9',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		}
	])
	const focusClick = (searchItem : searchList) => {
		choiceIndex.value = searchItem.index
	};
	const blurClick = () => {
		choiceIndex.value = ''
	};
	const clickshow = (item : any, name : string) => {
		if (name == 'give') {
			item.giveshowSelect = !item.giveshowSelect;
		}
		if (name == 'discount') {
			item.discountshowSelect = !item.discountshowSelect;
		}
		if (name == 'exchange') {
			item.exchangeshowSelect = !item.exchangeshowSelect;
		}
	}
	const clickchange = (item : any, index : any, name : string, text : any) => {
		if (name == 'give') {
			item.give = text
			item.givetype = index
			item.giveshowSelect = !item.giveshowSelect;
		}
		if (name == 'discount') {
			item.discount = text
			item.discounttype = index
			item.discountshowSelect = !item.discountshowSelect;
		}
		if (name == 'exchange') {
			item.exchange = text
			item.exchangetype = index
			item.exchangeshowSelect = !item.exchangeshowSelect;
		}
	}
</script>

<style lang="scss" scoped>
	.for-content {
		background-color: #fff;
		margin-top: 20px;
		padding: 10px 10px 0px 10px;

		.container {
			position: relative;
			display: inline-block;

			.select-box {
				position: absolute;
				top: -20px;
				right: -60px;
				background-color: #fff;
				border: 1px solid #ccc;
				font-size: 12px;

				.textbg {
					background-color: #0071bb;
					color: #fff;
					padding: 0 5px;
				}

				.text {
					padding: 0 5px;
				}

				.text:hover {
					cursor: pointer;
				}

				.textbg:hover {
					cursor: pointer;
				}
			}
		}

		.choice-list {
			display: flex;
			flex-wrap: wrap;

			.choice-item {
				width: 14.2%;
				display: flex;
				align-items: center;
				margin-bottom: 10px;

				.el-select {
					width: 160px;
				}

				.choice-title {
					font-size: 12px;
					width: 120px;
					text-align: center;
				}

				.rounded-input {
					width: 160px;
				}
			}

			.choice-box {
				width: 71%;
				display: flex;
				justify-content: right;

				.choice-btn {
					display: flex;
					justify-content: left;
				}
			}
		}

		.use {
			padding: 20px 10px 10px;
		}

		.del {
			color: #0071bb;
		}

		.goods_img {
			width: 40px;
			height: 50px;
		}

		.head-info {
			padding: 10px;
			background-color: #0071bb;
			display: flex;

			.info-item {
				width: 220px;
				color: #fff;
				font-size: 12px;
			}
		}

		.th_title {
			display: flex;
			align-items: center;
		}
	}
</style>